<template>
  <div id="app">
    <el-container>
      <!-- 左侧菜单 -->
      <el-aside :width="isCollapse ? '64px' : '220px'">
        <!-- 项目标题 -->
        <div class="project-title" :class="{ 'collapsed': isCollapse }">
          <h2 v-show="!isCollapse">PIDS采集后端管理系统</h2>
          <h2 v-show="isCollapse">PIDS</h2>
        </div>
        <el-menu 
          :router="true" 
          mode="vertical" 
          :default-active="$route.path" 
          background-color="#1f2d3d"
          text-color="#fff"
          active-text-color="#409EFF"
          :collapse="isCollapse"
          :collapse-transition="false"
          unique-opened>
            <el-menu-item index="/modeloid">
              <i class="el-icon-document-copy"></i>
              <span slot="title">ModelOID管理</span>
            </el-menu-item>
          <el-menu-item index="/snmp">
            <i class="el-icon-monitor"></i>
            <span slot="title">设备信息</span>
          </el-menu-item>
          <el-menu-item index="/database">
            <i class="el-icon-coin"></i>
            <span slot="title">数据库信息</span>
          </el-menu-item>
          <el-menu-item index="/redis">
            <i class="el-icon-lightning"></i>
            <span slot="title">Redis信息</span>
          </el-menu-item>
          <el-menu-item index="/docker">
            <i class="el-icon-box"></i>
            <span slot="title">Docker信息</span>
          </el-menu-item>
          <el-menu-item index="/interface">
            <i class="el-icon-connection"></i>
            <span slot="title">接口服务信息</span>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <!-- 主内容区域 -->
      <el-container>
        <el-header height="60px">
          <div class="header-content">
            <div class="header-left">
              <div class="collapse-btn" @click="toggleCollapse">
                <i :class="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"></i>
              </div>
              <span class="breadcrumb">{{ getCurrentMenuTitle() }}</span>
            </div>
            <div class="header-right">
              <!-- 这里可以添加用户信息、退出按钮等 -->
            </div>
          </div>
        </el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      isCollapse: false
    }
  },
  methods: {
    getCurrentMenuTitle() {
      const routePath = this.$route.path;
      const menuMap = {
        '/snmp': '设备信息',
        '/database': '数据库信息',
        '/redis': 'Redis信息',
        '/docker': 'Docker信息',
        '/interface': '接口服务信息',
        '/modeloid': 'ModelOID管理'
      };
      return menuMap[routePath] || '';
    },
    toggleCollapse() {
      this.isCollapse = !this.isCollapse;
    }
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}

.el-container {
  height: 100vh;
}

.el-aside {
  background-color: #1f2d3d;
  box-shadow: 2px 0 6px rgba(0,21,41,.35);
  transition: width 0.3s;
}

.project-title {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #1a2634;
  padding: 0 15px;
  transition: all 0.3s;
  overflow: hidden;
}

.project-title.collapsed {
  padding: 0 5px;
}

.project-title h2 {
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.el-menu {
  border-right: none;
}

.el-menu--collapse {
  width: 64px;
}

.el-menu-item {
  height: 56px;
  line-height: 56px;
  font-size: 14px;
}

.el-menu-item i {
  color: #fff;
  font-size: 18px;
  margin-right: 10px;
}

.el-menu-item:hover {
  background-color: #283446 !important;
}

.el-menu-item.is-active {
  position: relative;
  background-color: #1890ff !important;
}

.el-menu-item.is-active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: #fff;
}

.el-menu-item.is-active i,
.el-menu-item.is-active span {
  color: #fff !important;
}

.el-header {
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(0,21,41,.08);
  padding: 0 20px;
}

.header-content {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-left {
  display: flex;
  align-items: center;
}

.collapse-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  cursor: pointer;
  margin-right: 15px;
  border-radius: 50%;
  transition: background-color 0.3s;
}

.collapse-btn:hover {
  background-color: #f0f2f5;
}

.collapse-btn i {
  font-size: 20px;
  color: #303133;
}

.breadcrumb {
  font-size: 16px;
  font-weight: bold;
  color: #303133;
}

.header-right {
  display: flex;
  align-items: center;
}

.el-main {
  background-color: #f0f2f5;
  padding: 20px;
}

/* 添加一些过渡效果 */
.el-menu-item {
  transition: all 0.3s;
}
</style>